<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row  class="query-form">
                <Col span="8">
                    <FormItem label="所属单位：">
                        <cascaderDom ref="queryOrgCascader" @setOrgInfo="setOrgId" @setOrgname="setOrgName"
                                     :rootOrgId="companyId"
                                     :orgTree="true"></cascaderDom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="人员名称：">
                        <Input class='query-form-el' type='text' v-model='dataToQuery.userName'/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                    <!--<Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="downloadFile">导出</Button>-->
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
               :loading='pageStatus.loading'
               border :columns="columns1" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>
        <Modal title="参会回执表" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=500
               :styles="{height:'400px'}"  class-name='limit-height-dialog'>
            <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'"
                  :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"
                  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?130:null">
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23">
                        <FormItem label='单位：' prop='company'>
                            <div v-if="mode === 'view'">{{ dataToView.company }}</div>
                            <Input v-else class=''placeholder="请填写单位" type='text' v-model='dataToView.company'></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                        <FormItem label='姓名：'>
                            <div v-if="mode === 'view'">{{ dataToView.userName }}</div>
                            <Input v-else class=''placeholder="请填写姓名" type='text' v-model='dataToView.userName'></Input>
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label='职务：' prop='duties'>
                            <div v-if="mode === 'view'">{{ dataToView.duties }}</div>
                            <Input v-else class=''placeholder="请填写工作部门" type='text' v-model='dataToView.duties'></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                        <FormItem label='手机号：' prop='telPhone'>
                            <div v-if="mode === 'view'">{{ dataToView.telPhone }}</div>
                            <Input v-else class=''placeholder="请填写手机号" type='text' v-model='dataToView.telPhone'></Input>
                        </FormItem>
                    </Col>
                    <Col span="11">
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定
                </Button>
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>

    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import {sessionStorage, cookie} from '@/common/cacheUtils.js';
    import pageCommonFunction from '@/components/pageCommonFunction.js'

    export default {
        components: {cascaderDom},
        data() {
            return {
                ...this.createCommonDataField(),
                columns1: [
                    {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'company',title: '单位', minWidth:200, align: 'center' },
                    { key:'userName',title: '姓名', minWidth:200, align: 'center' },
                    { key:'duties',title: '职务', minWidth:200, align: 'center' },
                    { key:'telPhone',title: '联系电话', minWidth:200, align: 'center' },
                    this.getActionColumns()
                ],
                ruleCustom: {
                    company: [ { required: true, message: '请填写单位', trigger: 'change',}],
                    userName: [ { required: true, message: '请填写姓名', trigger: 'change',}],
                    duties: [ { required: true, message: '请填写职务', trigger: 'change',}],
                    telPhone: [ {
                        validator: (rule, value, callback) => {
                            if(!(/^1[3456789]\d{9}$/.test(this.dataToView.telPhone))){
                                callback(' ');
                                // this.$Message.error("请填写有效的的手机号")
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'blur'
                    }],
                },
                tableHeight: 10,
                companyId:'',
                // api
                queryUrl: Api.queryAttendanceReceipt,
                deleteUrl: Api.deleteAttendanceReceipt,
                updateUrl: Api.updateAttendanceReceipt,
                saveUrl: Api.saveAttendanceReceipt,
            }
        },
        mounted() {
            this.companyId=sessionStorage('userId').getObject('userId').companyId
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query();
        },
        methods: {
            ...pageCommonFunction,
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            query() {
                if (this.dataToQuery.companyId != null&&this.dataToQuery.companyId != undefined&&this.dataToQuery.companyId != '') {
                    this.dataToQuery.orgId=this.dataToQuery.companyId
                }else {
                    this.dataToQuery.orgId = sessionStorage('userId').getObject('userId').companyId
                }
                this.queryAjax();
            },
            submit(name) {
                this.submitAjax(name);
            },
            // async beforeEditDialogOpen(data) {
            //     data.row.resWorks=data.row.resWork.split(',')
            // },
            createEmptyDataToAdd() {
                return {
                    careerQulify:null,
                    // staffOrgId: sessionStorage('userId').getObject('userId').companyId,
                    // staffOrgName: sessionStorage('userId').getObject('userId').companyName,
                    age: null,
                    workingYears:null,
                    resWorks:[],
                    secGroup:sessionStorage('userId').getObject('userId').twoLevelOrgId,
                    secGroupName:sessionStorage('userId').getObject('userId').twoLevelOrgName,

                }
            },
            setOrgId(data) {
                this.dataToQuery.companyId = data[data.length - 1];
            },
            setOrgName(data) {
                this.dataToQuery.orgName = data;
            },
        },
        computed: {},

    }
</script>

<style lang='css' scoped>
    @import '../../../index.css';
</style>
